<!--督导评教-->
<template>
  <div class="wrapper-container">
    <div class="table-container" style="margin:0">
       <div class="search-container-item" style="display:inline">
        <span style="color:rgb(0 76 167)">学期：</span>
        <el-select
          v-model="termid"
          clearable
          style="width:150px"
          size="mini"
          placeholder="请选择"
          @change="clickSactive"
        >
          <el-option
            v-for="item in xqList"
            :key="item.value"
            :label="item.xqmc"
            :value="item.xqmc"
          >
          </el-option>
        </el-select>
      </div>
      <div class="search-container-item" style="display:inline;margin-left:15px">
        <span style="color:rgb(0 76 167)">教学评教活动：</span>
        <el-select
          v-model="active"
          clearable
          style="width:150px"
          size="mini"
          placeholder="请选择"
        >
          <el-option
            v-for="item in activeList"
            :key="item.pjEvalproject.evalprojectname"
            :label="item.pjEvalproject.evalprojectname"
            :value="item.pjEvalproject.evalprojectid"
          >
          </el-option>
        </el-select>
      </div>
      <div class="search-button" style="display:inline-flex;margin-left:15px;position: relative;top: 5px;" @click="elipj">
        <img src="../../../assets/assessment/icon-search.png" alt="" />
        <span>查询</span>
      </div>
      <el-table
        :data="tableData"
        style="width: 100%"
        class="xpaas-table-class"
        row-class-name="xpaas-row-class"
        cell-class-name="xpaas-cell-class"
        header-row-class-name="xpaas-header-row-class"
        header-cell-class-name="xpaas-header-cell-class"
      >
        <el-table-column
          prop="staffroom"
          label="教研室"
          width="171"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="coursename"
          label="课程名称"
          width="159"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="grade" label="年级" width="148" align="center">
        </el-table-column>
        <el-table-column
          prop="classes"
          label="教学班"
          width="179"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="majorclasses"
          label="专业班次"
          width="362"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="teachername"
          label="参评对象"
          width="158"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="description"
          label="修改说明"
          width="180"
          align="center"
        >
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <div
              class="setting-button"
              @click="
                eligible(
                  scope.row.evalactorid,
                  scope.row.teacherid,
                  scope.row.evalprojectid
                )
              "
            >
              <img src="../../../assets/assessment/icon-setting.png" alt="" />
              <span>设置个性化指标</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { elipj } from "@/api/teacher/supervision";
import { reqGetXqList } from "../../../api/classHoursAddList/addList";
import { pjevalByAll } from "@/api/teacher/admin";

export default {
  data() {
    return {
      termid:'',
      active:'',
      xqList:[],
      activeList:[],
      id: "2",
      showDialog: false,
      name: "",
      evalactorid: "1",
      tableData: []
    };
  },
  created() {
    this.getXqList();
  },
  methods: {
    //获取学期
    async getXqList() {
      const result = await reqGetXqList();
      if (result.data.code == 200) {
        this.xqList = result.data.data;
      }
    },
    //选择学期联动查询活动
    clickSactive(){
      this.active = ''
      let time = {};
      time = this.termid;
      return new Promise(() => {
        pjevalByAll(time).then(res => {
          this.activeList = res.data.data
        })
      })
    },
    //查看参评课程
    elipj() {
      return new Promise(() => {
        //教员查询到所有数据
        elipj(this.active).then(res => {
          this.tableData = res.data.data;
          let arr = [];
          for (let i = 0; i < this.tableData.length; i++) {
            let pjEvalactor = this.tableData[i].pjEvalactor;
            let pjResult = this.tableData[i].pjResult;
            let obj = { ...pjEvalactor, ...pjResult };
            arr.push(obj);
          }
          this.tableData = arr;
          console.log(this.tableData, "this.tableData");
        });
      });
    },

    //  根据ID跳转
    eligible(evalactorid, teacherid, evalprojectid) {
      this.$router.push({
        path: "/teacher/eligible/setupMetrics",
        query: {
          evalactorid: evalactorid,
          teacherid: teacherid,
          evalprojectid: evalprojectid
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.search-button {
    width: 77px;
    height: 28px;
    line-height: 28px;
    background: #f1f8fe;
    border: 1px solid #51aef6;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    > span {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #51aef6;
    }
    > img {
      width: 20px;
      height: 20px;
      margin-right: 4px;
    }
  }
@fontFamily:"Microsoft YaHei";
.xpaas-table-class {
  border: 1px solid #004ca7;
  border-radius: 9px;
  margin: 15px 0;
  > ::v-deep div.el-table__header-wrapper {
    > table.el-table__header {
      > thead {
        > tr.xpaas-header-row-class {
          padding: 0;
          height: 76px;
          background-color: #edf2f9;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          line-height: 20px;
          color: #004ca7;
          > th.xpaas-header-cell-class {
            font-weight: bold;
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            background-color: #edf2f9;
            > div.cell {
              font-size: 16px;
              font-weight: bold;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
        }
      }
    }
  }
  > ::v-deep div.el-table__body-wrapper {
    > table.el-table__body {
      > tbody {
        > tr.xpaas-row-class {
          > td.xpaas-header-cell-class {
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            background-color: #edf2f9;
            > div.cell {
              font-size: 16px;
              font-weight: bold;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
          > td.xpaas-cell-class {
            height: 76px;
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            > div.cell {
              font-weight: normal;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
        }
      }
    }
  }
}
.back-container {
  .back-text {
    margin-top: 33px;

    > div {
      display: inline-block;

      &:nth-child(1) {
        padding-left: 111px;
        font-size: 20px;
        color: rgba(0, 76, 167, 1);
        font-weight: bold;
        vertical-align: top;
      }
    }
  }

  .el-dialog__footer {
    padding-bottom: 55px;
  }

  .confirm-button {
    width: 87px;
    height: 36px;
    padding: 0;
    background: #f1fff8;
    border: 1px solid #02c86c;
    border-radius: 4px;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #02c86c;
    cursor: pointer;
    margin-right: 92px;
  }

  .cancle-button {
    .confirm-button;
    background: #ffefef;
    border: 1px solid #ff3819;
    color: #ff3819;
    margin-right: 0px;
  }
}

.table-container {
  margin-top: 30px;

  .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }

  .el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }

  .el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }

  .setting-button {
    width: 157px;
    height: 27px;
    margin: 0 auto;
    line-height: 27px;
    background: #efebff;
    border: 1px solid #5230e9;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    > span {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #5230e9;
    }

    > img {
      width: 14px;
      height: 14px;
      margin-right: 6px;
    }
  }
}
</style>

<style lang="less" scoped>
.wrapper-container {
  width: 1568px;
  margin: 0 auto;
}

.table-container {
  margin-top: 62px;

  .table-data {
    width: 100%;
    border: 0.8px solid #004ca7;
    border-radius: 9px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #004ca7;
  }
}

.bottom-block {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  margin-top: 20px;

  .search-button {
    width: 77px;
    height: 28px;
    line-height: 28px;
    background: #f1f8fe;
    border: 1px solid #51aef6;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    > span {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #51aef6;
    }

    > img {
      width: 20px;
      height: 20px;
      margin-right: 4px;
    }
  }
}
</style>
